import React from "react";
import {ModalForm, ProColumns, ProTable, CheckCard} from "@ant-design/pro-components";
import {message, Tag, Button} from "antd";


const Deployments: React.FC = () => {
  const [visible, setVisible] = React.useState(false);
  const columns: ProColumns<Record<string, any>, "text"> [] = [
    {
      title: '状态',
      dataIndex: 'status',
      render: () => {
        return <Tag color={'#87d068'}>正常</Tag>
      }

    },
    {
      title: '名称',
      dataIndex: 'name'
    },
    {
      title: '命名空间',
      dataIndex: 'namespace'
    },
    {
      title: '镜像',
      dataIndex: 'image'
    },
    {
      title: 'Ready',
      dataIndex: 'Ready'
    },
    {
      title: 'Up-to-data',
      dataIndex: 'Up_to_data'
    },
    {
      title: 'Available',
      dataIndex: 'Available'
    },
    {
      title: '存活时间',
      dataIndex: 'alive'
    },
    {
      title: 'Health',
      dataIndex: 'Health'
    },
  ]

  const dataSource = [
    {
      key: '1',
      name: 'Deployment1',
      namespace: 'default',
      image: 'nginx:latest',
      Ready: '2/2',
      Up_to_data: '2/2',
      Available: '2/2',
      alive: '20s',
      Health: 'Healthy',
    },
    {
      key: '2',
      name: 'Deployment2',
      namespace: 'default',
      image: 'nginx:latest',
      Ready: '2/2',
      Up_to_data: '2/2',
      Available: '2/2',
      alive: '20s',
      Health: 'Healthy',
    },
    {
      key: '3',
      name: 'Deployment3',
      namespace: 'default',
      image: 'nginx:latest',
      Ready: '2/2',
      Up_to_data: '2/2',
      Available: '2/2',
      alive: '20s',
      Health: 'Healthy',
    },
    {
      key: '4',
      name: 'Deployment4',
      namespace: 'default',
      image: 'nginx:latest',
      Ready: '2/2',
      Up_to_data: '2/2',
      Available: '2/2',
      alive: '20s',
      Health: 'Healthy',
    },
    {
      key: '5',
      name: 'Deployment5',
      namespace: 'default',
      image: 'nginx:latest',
      Ready: '2/2',
      Up_to_data: '2/2',
      Available: '2/2',
      alive: '20s',
      Health: 'Healthy',
    },
    {
      key: '6',
      name: 'Deployment6',
      namespace: 'default',
      image: 'nginx:latest',
      Ready: '2/2',
      Up_to_data: '2/2',
      Available: '2/2',
      alive: '20s',
      Health: 'Healthy',
    }
  ]


  return (
    <>
      <ProTable columns={columns}
                search={false}
                toolbar={{
                  title: '部署列表',
                  actions: [
                    <Button type={"primary"} onClick={() => setVisible(true)}>添加应用</Button>,
                  ]
                }}
        // toolBarRender={false}
                size={"small"}
                dataSource={dataSource}
      />

      <ModalForm open={visible} onOpenChange={setVisible} title={'应用市场'}>

        <CheckCard.Group
          multiple
          onChange={(value) => {
            console.log('value', value);
          }}
          defaultValue={['A']}
        >
          <CheckCard
            title="Card A"
            description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念"
            value="A"
          />
          <CheckCard
            title="Card C"
            description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念"
            value="C"
          />
          <CheckCard
            title="Card D"
            description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念"
            value="D"
          />
        </CheckCard.Group>

      </ModalForm>
    </>
  )
}
export default Deployments;
